<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      margin:0;
    }

  </style>
</head>
<body>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/position
sticky
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
元素按照文档的正常流向定位，然后根据top、right、bottom、 走了。 偏移量不会影响任何其他元素的位置。


This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG).
这个值总是会创建一个新的堆叠上下文。 请注意，粘性元素“粘”到其最近的具有“滚动机制”的祖先（在隐藏、滚动、自动或覆盖时创建），即使该祖先不是最近的实际滚动祖先。 这有效地抑制了任何“粘性”行为（请参阅 W3C CSSWG 上的 GitHub 问题）。

...

You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
您必须指定一个阈值，其中至少包含顶部、右侧、底部或左侧之一，以使粘性定位按预期运行。 否则，它将与相对定位无法区分。
-->


<div style="height: 100px;background: orange;"></div>
<div style="background: pink;width: 100px;height: 150vh;">
<!--
todo
没有上面那个橙色方块时, 我们这里初始就会距离顶部8px
但有了的时候 我们这里初始为0
-->
  <div style="position: sticky;top:8px;">
    <span>🌭 向上收起</span>
  </div>
</div>



</body>
</html>
